<template>
    <div style="height:100%;">
      <div>
        <div class='content-title'>
          <div class='content-title-parent'>用户平台</div>
          /
          <div class='content-title-child'>用户管理</div>
        </div>
        <hr class='content-hr'/>
      </div>
      <!--表格筛选条件-->
      <el-row style="margin-top:10px" class='lostManaClass userListClass'>
        <el-form v-model="filterForm" ref="filterForm":inline="true">
          <el-form-item label="手机号码：">
            <el-input v-model="filterForm.phoneNum" @keyup.native="filterForm.phoneNum=filterForm.phoneNum.replace(/[^0-9]/g ,'')" clearable style="width:160px"></el-input>
          </el-form-item>
          <el-form-item label="登陆日期：">
            <el-date-picker
              v-model="filterForm.loginTime"
              type="daterange"
              style="width:260px"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="注册日期：">
            <el-date-picker
              v-model="filterForm.registerTime"
              type="daterange"
              style="width:260px"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-button type="success" style="background-color:#2280E9;border-color:#2280E9;width:60px;" @click="submitSearch()">查询</el-button>
        </el-form>
      </el-row>
      <!--表格数据-->
      <el-row>
        <el-table 
          v-loading="loading"
          :element-loading-text="loadingText"
          element-loading-spinner="el-icon-loading"
          :data="filterFormFro.tableData" 
          :border="true"
          :row-class-name="tableRowClassName"
          :header-cell-class-name = "tableHeaderClassName"
          v-bind:style="{width: tableWidth + 'px'}">
          <el-table-column prop="index" label="序号"  min-width="8%">
          </el-table-column>
          <el-table-column prop="phoneNum" label="手机号" min-width="20%">
          </el-table-column>
          <el-table-column prop="nickName" label="昵称" min-width="15%">
          </el-table-column>
          <el-table-column prop="sex" label="性别" min-width="8%">
          </el-table-column>
          <el-table-column prop="birthday" label="生日" min-width="15%">
          </el-table-column>
          <el-table-column prop="userName" label="姓名" min-width="13%">
          </el-table-column>
          <el-table-column prop="idNumber" label="身份证号" min-width="25%">
          </el-table-column>
          <el-table-column prop="recentTime" label="最后一次登录时间" min-width="25%">
          </el-table-column>
          <el-table-column prop="registerTime" label="注册时间" min-width="25%">
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 表格下方分页 -->
      <el-row>
        <div class="pagination" style="text-align:center" v-show="paginationVisible">
          <el-pagination
            @current-change="handleCurrentChange"
            background
            :current-page="filterForm.pageNum"
            :page-size="15"
            layout="prev,pager, next"
            :page-count="filterFormFro.allPages">
          </el-pagination>
        </div>
      </el-row>
    </div>
</template>
<script>
import apiBus from '../../api/businessPlat/apiBus.js'
import '../../../static/css/businessPlat/common.css'
import '../../../static/css/businessPlat/userList.css'
import '../../../static/css/businessPlat/lostMana.css'
export default {
  created () {
    this.init() // 初始化搜索数据
    this.getUserListFro()
  },
  data () {
    return {
      icontest: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      loadingText: '正在拼命加载中，请稍等......',
      loading: true,
      paginationVisible: false, // 表格下方分页是否显示
      filterForm: { // 筛选表单
        registerTime: [], // 注册时间
        loginTime: [], // 登录时间
        phoneNum: '', // 手机号
        pageNum: 1 // 分页数
      },
      filterFormFro: {
        tableData: [], // 表格数据
        allPages: 0 // 总页数
      },
      formLabelWidth: '30%',
      tableWidth: ''
    }
  },
  methods: {
    /** ****************************************** 提交后台相关函数 **************************************** */
    // 查看用户列表
    getUserListFro () {
      this.loading = true
      this.paginationVisible = false
      let registerTime = ''
      let loginTime = ''
      if (this.filterForm.registerTime && this.filterForm.registerTime.length > 0) {
        registerTime = this.formatDateFro(this.filterForm.registerTime[0]) + '/' + this.formatDayFro(this.filterForm.registerTime[1])
      }
      if (this.filterForm.loginTime && this.filterForm.loginTime.length > 0) {
        loginTime = this.formatDateFro(this.filterForm.loginTime[0]) + '/' + this.formatDayFro(this.filterForm.loginTime[1])
      }
      let para = {
        header: JSON.stringify({
          token: sessionStorage.getItem('token'),
          beanId: 'userAndroidService_v1'
        }),
        body: JSON.stringify({
          pageSize: 15,
          page: parseInt(this.filterForm.pageNum),
          timeRegist: registerTime,
          timeLogin: loginTime,
          userPhone: this.filterForm.phoneNum
        })
      }
      apiBus.getUserList(para).then(res => {
        this.filterFormFro.tableData = []
        this.loading = false
        if (res.data.body.result === 1000) {
          let resData = res.data.body.content
          if (resData.list.length > 0) {
            this.$message.success('查看用户列表成功！')
            this.filterFormFro.tableData = resData.list
            this.filterFormFro.allPages = resData.pages
            for (let i = 0; i < resData.list.length; i++) {
              this.filterFormFro.tableData[i].index = (parseInt(this.filterForm.pageNum) - 1) * 15 + i + 1
              if (this.filterFormFro.tableData[i].birthday) {
                this.filterFormFro.tableData[i].birthday = this.formatBirthdayFro(new Date(this.filterFormFro.tableData[i].birthday))
              }
              this.filterFormFro.tableData[i].registerTime = this.formatDateFro(new Date(this.filterFormFro.tableData[i].registerTime))
              this.filterFormFro.tableData[i].recentTime = this.formatDateFro(new Date(this.filterFormFro.tableData[i].recentTime))
              this.filterFormFro.tableData[i].phoneNum = this.filterFormFro.tableData[i].userPhone
            }
            this.filterFormFro.allPages > 1 ? this.paginationVisible = true : this.paginationVisible = false
          } else {
            this.$message.warning('没有任何用户信息！')
          }
        } else {
          this.$message.error(res.data.body.resultDesp)
        }
      })
      .catch(error => {
        this.loading = false
        this.$message.error(error)
      })
    },
    /** *************************** 页面显示，数据格式转换相关函数 ************************** */
    // 初始化搜索数据(登陆日期和注册日期)
    init () {
      let end = new Date()
      let start = new Date()
      let hour = new Date().getHours()
      let minute = new Date().getMinutes()
      let second = new Date().getSeconds()
      start.setTime(start.getTime() - hour * 3600 * 1000 - minute * 60 * 1000 - second * 1000 - 24 * 3600 * 30 * 1000)
      end.setTime(end.getTime() - hour * 3600 * 1000 - minute * 60 * 1000 - second * 1000)
      this.filterForm.loginTime[0] = start
      this.filterForm.loginTime[1] = end
      this.filterForm.registerTime[0] = start
      this.filterForm.registerTime[1] = end
    },
    // 将时间转化为字符串
    formatDateFro (now) {
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var date = now.getDate()
      date = date < 10 ? ('0' + date) : date
      var hour = now.getHours()
      hour = hour < 10 ? ('0' + hour) : hour
      var minute = now.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      var second = now.getSeconds()
      second = second < 10 ? ('0' + second) : second
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    },
    // 将时间转化为字符串(filterForm)
    formatDayFro (now) {
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var date = now.getDate() + 1
      date = date < 10 ? ('0' + date) : date
      var hour = now.getHours()
      hour = hour < 10 ? ('0' + hour) : hour
      var minute = now.getMinutes()
      minute = minute < 10 ? ('0' + minute) : minute
      var second = now.getSeconds()
      second = second < 10 ? ('0' + second) : second
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    },
    // 将时间转化为字符串(生日)
    formatBirthdayFro (now) {
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var date = now.getDate()
      date = date < 10 ? ('0' + date) : date
      return year + '-' + month + '-' + date + ' '
    },
    // 分页页面跳转时
    handleCurrentChange (val) {
      this.filterForm.pageNum = val
      this.getUserListFro()
    },
    // 设置表格header样式
    tableHeaderClassName ({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'headerClass'
      }
    },
    // 设置表格行样式
    tableRowClassName ({row, rowIndex}) {
      return ''
    },
    submitSearch () {
      this.filterForm.pageNum = 1
      this.getUserListFro()
    }
  },
  mounted () {
    this.tableWidth = document.body.scrollWidth - 259 - 20
  }
}
</script>